<template>
	<div class="un-pass">
		<div v-if="data.Status == 30">
			<div class="result-tilte">{{ data.ExamName }}</div>
			<div
				class="exam-result pass-exam"
				v-if="data.Status == 30 && data.IsPass == 1"
			>
				<img src="@/assets/Images/AppIcon/icon_exam_pass.png" alt="" />
				<div class="exam-result-r">
					<div class="exam-result-score mb-5">
						<span>{{ data.Score }}</span
						>分
					</div>
					<div class="exam-result-desc">恭喜你通过考试哦</div>
				</div>
			</div>
			<div class="exam-result" v-if="data.Status == 30 && data.IsPass == 0">
				<img src="@/assets/Images/AppIcon/icon_exam_pass_no.png" alt="" />
				<div class="exam-result-r">
					<div class="exam-result-score mb-5">{{ data.Score }}分</div>
					<div class="exam-result-desc">未能通过考试，继续加油</div>
				</div>
			</div>
			<div class="exam-result-title mb-10">您的考试结果为：</div>
			<div v-for="(item, index) in list" :key="index">
				<div v-if="item.children">
					<div class="mb-10">{{ item.QName }}</div>
					<div class="topic-list">
						<div
							class="topic-list-detail"
							v-for="(v, i) in item.children"
							:key="i"
						>
							<div
								class="topic"
								:class="[
									v.AnswerResult == 2
										? 'right'
										: v.AnswerResult == 1
										? 'half-right'
										: 'wrong',
								]"
							>
								<span>{{ v.SEQ }}</span>
								<img
									:src="
										v.AnswerResult == 2
											? right
											: v.AnswerResult == 1
											? halfRight
											: wrong
									"
									alt=""
								/>
							</div>
						</div>
					</div>
				</div>
			</div>
			<eagle-divider />
			<div class="result-btns">
				<eagle-button
					size="small"
					v-if="data.IsAllowedViewAnswer"
					type="info"
					class="mr-20"
					@click="_lookResult()"
					>查看试卷</eagle-button
				>
				<eagle-button
					size="small"
					v-if="data.IsAllowedRepeatExam"
					@click="_goExam()"
					type="info"
					>再考一次</eagle-button
				>
			</div>
		</div>
		<div class="exam-review" v-else>
			<div class="result-tilte">{{ data.ExamName }}</div>
			<div class="exam-result exam-review-result">
				<img src="@/assets/Images/AppIcon/icon_exam_making.png" alt="" />
				<div class="exam-result-r">
					<div class="exam-result-score mb-5">正在批阅</div>
					<div class="exam-result-desc">试卷正在批阅中</div>
				</div>
			</div>
			<eagle-divider />
			<div class="none-result">暂无考试结果</div>
		</div>
	</div>
</template>

<script>
import store from '@/store/index'
export default {
	data() {
		return {
			id: this.$route.query.id,
			data: {},
			list: [],
			right: require('@/assets/Images/AppIcon/icon_exam_question_right.png'),
			halfRight: require('@/assets/Images/AppIcon/icon_exam_question_halfright.png'),
			wrong: require('@/assets/Images/AppIcon/icon_exam_question_error.png'),
		}
	},

	created() {
		this.getExamResult()
	},

	methods: {
		getExamResult() {
			let _this = this;
			_this.loading = true
			_this.$axios
			.get("/ExExam/GetExamResult",{params:{id: _this.id}})
			.then((res) => {
				_this.loading = false
				res.data.Answers.push(
					{
						parentQType: 1,
						QName: '单选题',
						QType: 0,
					},
					{
						parentQType: 2,
						QName: '多选题',
						QType: 0,
					},
					{
						parentQType: 3,
						QName: '判断题',
						QType: 0,
					},
					{
						parentQType: 4,
						QName: '填空题',
						QType: 0,
					},
					{
						parentQType: 5,
						QName: '简答题',
						QType: 0,
					}
				)
				let newArr = this.toTree(res.data.Answers)
				_this.list = newArr
				_this.data = res.data
				store.commit('updateResultID', '')
			})
		},
		toTree(data) {
			var result = []
			if (!Array.isArray(data)) {
				return result
			}
			data.forEach((item) => {
				delete item.children
			})
			let map = {}
			data.forEach((item) => {
				map[item.parentQType] = item
			})

			data.forEach((item) => {
				let parent = map[item.QType]
				if (parent) {
					;(parent.children || (parent.children = [])).push(item)
				} else {
					result.push(item)
				}
			})
			return result
		},

		// 查看试卷
		_lookResult() {
			this.$router.push('/Train/ExamResultDetail?id=' + this.id)
		},
		// 再考一次
		_goExam() {
			this.$router.push('/Train/ExExamExplain?id=' + this.data.ExamID)
		},
	},
}
</script>

<style lang="less" scoped>
.un-pass {
	padding: 0 10px;
	padding-bottom: 50px;
	font-size: 14px;
	min-height: 100vh;
	overflow-y: auto;
	background-color: #fff;
}

.result-tilte {
	height: 40px;
	text-align: center;
	line-height: 40px;
}
.exam-result {
	display: flex;
	align-items: center;
	width: 100%;
	height: 80px;
	border-radius: 10px;
	background-color: rgb(236, 109, 66);
	padding: 0 30px;
	color: #fff;
	img {
		width: 50px;
		height: 50px;
		margin-top: 10px;
		margin-right: 10px;
	}
	.exam-result-score {
		font-size: 20px;
	}
	.exam-result-desc {
		font-size: 14px;
	}
}
.pass-exam {
	background-color: rgb(68, 198, 179);
	span {
		color: #ffa841;
	}
}
.exam-review-result {
	background-color: rgb(35, 134, 248);
	img {
		width: 40px;
		height: 45px;
	}
}
.exam-result-title {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #eee;
}
.topic-list {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	.topic-list-detail {
		width: 20%;
		margin-bottom: 20px;
	}
	.topic {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 50px;
		height: 18px;
		border-radius: 8px;
		padding: 0 5px;
		color: #fff;
		font-size: 10px;
		margin: auto;

		img {
			width: 12px;
			height: 12px;
		}
	}
	.right {
		background-color: #48d195;
	}
	.half-right {
		background-color: #ffa841;
	}
	.wrong {
		background-color: #fa7654;
	}
}
// 底部按钮
.result-btns {
	text-align: center;
}
.none-result {
	width: 100%;
	height: 300px;
	text-align: center;
	line-height: 300px;
	font-size: 20px;
	color: #ccc;
}
</style>